<!-- 背景-动态效果 -->
<template>
<div id="sketchs">
  <div
    v-for="sketch in backgroundSketchs"
    :key="sketch.value"
    :style="{ backgroundImage: `url(${img[sketch.value]})` }"
    @click.self="changeBackgroundSketch(sketch.value)"
  >{{ sketch.label }}</div>
</div>
</template>

<script>
import { backgroundSketchs } from '@/assets/js/data'
import { BACKGROUND_SKETCH } from '@/store/mutationsTypes'

import blobsImg from '@/assets/img/background/blobs.jpg'
import wavesImg from '@/assets/img/background/waves.jpg'

export default {
  name: 'sketchs',
  data() {
    return {
      backgroundSketchs, // 背景效果 数据
      img: {
        blobs: blobsImg,
        waves: wavesImg
      }
    }
  },
  methods: {
    changeBackgroundSketch(sketch) {
      this.$store.commit(BACKGROUND_SKETCH, sketch)
    }
  }
}
</script>

<style lang="stylus">
#sketchs
  > div
    display flex
    justify-content center
    align-items center
    font-size 12px
    background-color rgba(0, 0, 0, .2)
    background-size cover
    background-repeat no-repeat
    background-position center
</style>